.archives-wrap
  margin: block-margin 0

.archives
  clearfix()

.archive-year-wrap
  margin-bottom: 1em

.archive-year
  @extend $block-caption

.archives
  column-gap: 10px
  @media mq-tablet
    column-count: 2
  @media mq-normal
    column-count: 2
.archive-article
  avoid-column-break()
.archive-article-inner
  @extend $block
  padding: 10px
  margin-bottom: 15px
.archive-article-header h1
  @extend $ellipsis
.archive-article-title
  text-decoration: none
  color: color-default
  transition: color 0.2s
  line-height: line-height
  font-size: 18px
  @extend $ellipsis
  &:hover
    color: main-color

.archive-article-footer
  margin-top: 1em

.archive-article-date
  color: color-grey
  text-decoration: none
  font-size: 1em
  line-height: 1em
  margin-bottom: 0.5em
  display: block
.archive-post-footer
  margin: 5px -10px 0 -10px
  padding: 5px 10px 0 10px
  border-top: 1px solid #e8e8e8
#page-nav
  clearfix()
  margin: block-margin auto
  border-radius: 3px
  text-align: center
  color: #727272
  overflow: hidden
  a, span
    padding: 10px 15px
    line-height: 1
    height: 2ex
    margin-right: 5px
    border-radius: 3px
  a
    color: color-grey
    text-decoration: none
    &:hover
      color: #fff
      background: main-color
  .page-number
    display: inline-block
    @media mq-mobile
      display: none
  .current
    font-weight: bold
    color: #fff
    background: main-color
  .space
    color: color-border